import React from 'react'
import './car.less'

import { connect } from 'react-redux'
import action from '../../../store/action/index.js'

import { withRouter } from 'react-router-dom'

import cookies from 'js-cookie'

import * as APIS from "../../../apis/get_apis.js"

class Car extends React.Component {
    constructor() {
        super();
        this.state = {
            msg: 'Car',
            testarr: [],
            num: 0
        }
    }
    render() {
        let { num } = this.state
        let { cardata, carNumber, carMoney } = this.props
        return (
            <div className="Car" style={{ position: 'flex', bottom: `${this.props.location.pathname === '/list' ? (this.props.parentWay.state.shopcarFlag ? 2 : 10) : 2}vh` }}>

                {
                    this.props.location.pathname === '/list' ?
                        <div className="Car_left" onClick={() => { this.displayShopCar() }}>
                            {/* 判断购物车是否有内容 carlist是购物车数据长度 */}
                            {cardata.length > 0 ? <div className="red_point">{carNumber}</div> : null}
                            <img src={require("../../../img/IMG_20210827_103747.png").default} />
                        </div> :
                        <div className="Car_left">
                            <div className="heji">合计</div>
                        </div>

                }
                {/* 购物车总价，根据数据.length.price填写 */}

                {
                    this.props.location.pathname === '/list' ?
                        <div className="Car_center" onClick={() => { this.displayShopCar() }}>
                            {cardata.length > 0 ? <p><span>￥</span>{carMoney}</p> : <p className="p">未选购商品</p>}
                        </div>
                        :
                        <div className="Car_center">
                            <p><span>￥</span>{carMoney}</p>
                        </div>
                }
                {/* 根据数据长度渲染页面 */}
                {
                    this.props.location.pathname === '/list' ?
                        (cardata.length > 0 ?
                            <div className="Car_right">
                                <p onClick={() => { this.goPay() }}>去结算</p>
                            </div> :
                            <div className="Car_right_no">
                                <p>去结算</p>
                            </div>) : <div className="Car_right">
                            <p onClick={() => {
                                let carIdData = []
                                this.props.cardata.forEach(item => {
                                    carIdData.push(item.car_id)
                                })
                                // 实现数据持久化
                                localStorage.setItem("carIdData", JSON.stringify(carIdData))
                                // 添加到后台
                                APIS.giveBackCarData({
                                    carIdData: carIdData
                                }).then(res => {
                                    console.log(res);
                                }).catch(err => {
                                    console.log(err);
                                })
                                this.props.history.push('/product')
                            }}>去支付</p>
                        </div>
                }

            </div>
        )
    }
    componentDidMount() {
        let { getCarData } = this.props
        // 获取购物车数据
        getCarData({
            user_id: cookies.get('user_id')
        })
    }
    goPay = () => {
        this.props.history.push('/settle')
    }
    displayShopCar = () => {

        if (this.props.cardata.length === 0) {
            console.log('无法打开购物车')
        } else {
            console.log('打开购物车')
            this.props.parentWay.openShopCar(true)
        }
    }
}
export default connect(state => state.foodf, action.foodf)(withRouter(Car))